<template>
  <div class="dashboard-container">
    <el-card>
      <!-- 卡片内容 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card header="今日订单数">1999</el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="今日日活">9</el-card>
        </el-col>
        <el-col :span="8">
          <el-card header="今日转化率">1%</el-card>
        </el-col>
      </el-row>

      <!-- 图表内容 -->
      <!-- 推荐使用: echarts库 -->
      <!-- 1. 准备容器 -->
      <div ref="demo" class="demo" />
    </el-card>
  </div>
</template>

<script>
// 导入echarts包
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  mounted() {
    // 2. 初始化图表
    // document.querySelector('.demo')  通过选择器获取DOM对象
    // this.$refs.demo                  通过vueRef属性获取DOM对象
    const charts = echarts.init(this.$refs.demo)
    // 3. 准备图表需要的数据
    charts.setOption({
      legend: {},
      title: { text: '班级成绩表' },
      xAxis: { type: 'category', data: ['小明', '小红', '小爱', '小海', '小耀', '小坤', '小李', '小朝'] },
      yAxis: { type: 'value' },
      series: [
        { name: 'Vue', type: 'bar', data: [100, 99, 80, 10, 50, 99, 100, 100] },
        { name: '小程序', type: 'bar', data: [20, 19, 18, 100, 70, 69, 0, 0] }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .demo {
    margin-top: 40px;
    width: 100%;
    height: 400px;
  }
}
</style>
